import { Flex, Input, Checkbox } from 'antd'
import './index.scss'
import PIcon from '@/component/common/pIcon'
import { alphabets } from '@/config/globalConfig'

export type Selection = {
  value: string
  label: string
  content: string
}

export interface MultipleChoiceProps {
  selections?: Array<Selection>
  answers?: Array<string>
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO'
  onSelectionChange?: (selections: any) => void
  onAnswersChange?: (answers: Array<string>) => void
}

function MultipleChoice(props: MultipleChoiceProps) {
  let {
    selections = [],
    state = 'QUESTYPE',
    onSelectionChange = () => {},
    onAnswersChange = () => {},
    answers = [],
  } = props

  if (state === 'QUESTYPE') {
    selections = [
      { label: 'A', value: 'A', content: '选项1' },
      { label: 'B', value: 'B', content: '选项2' },
      { label: 'C', value: 'C', content: '选项3' },
      { label: 'D', value: 'D', content: '选项4' },
    ]
  }

  const appendSelection = (index: number) => {
    if (selections.length >= 10) return
    const newSelection = {
      label: alphabets[selections.length],
      value: alphabets[selections.length],
      content: '',
    }
    const newSelections = [
      ...selections.slice(0, index + 1),
      newSelection,
      ...selections.slice(index + 1),
    ]
    newSelections.forEach((selection, idx) => {
      selection.label = alphabets[idx]
      selection.value = alphabets[idx]
    })
    onSelectionChange(newSelections)
  }

  const removeSelection = (index: number) => {
    if (selections.length <= 2) return
    const newSelections = [
      ...selections.slice(0, index),
      ...selections.slice(index + 1),
    ]
    onSelectionChange(newSelections)
  }

  return (
    <div>
      <Checkbox.Group
        disabled={['READ', 'PREVIEW'].includes(state)}
        onChange={(checkedValues) => {
          onAnswersChange(checkedValues as Array<string>)
        }}
        value={answers}>
        <Flex gap={'5px'} vertical>
          {selections.map((item, index) => {
            return (
              <Checkbox
                key={item.value}
                value={item.value}
                disabled={['READ', 'PREVIEW'].includes(state)}>
                <Flex align="center" gap="0.3rem">
                  <span style={{ width: '20px' }}>{item.label}</span>
                  {['READ','PREVIEW','TODO'].includes(state) ? (
                    <div style={{ width: 'calc(100% - 20px)' }}>{item.content}</div>
                  ) : (
                    <Input
                      disabled={[ 'READ', 'PREVIEW'].includes(state)}
                      style={{ minWidth: '500px' }}
                      key="name"
                      placeholder="请输入"
                      value={item.content}
                      allowClear
                      onChange={(e) => {
                        selections[index].content = e.target.value
                        onSelectionChange(selections)
                      }}
                    />
                  )}
                  {['WRITE'].includes(state) && (
                    <>
                      <PIcon
                        name="icon-add-circle"
                        size={20}
                        onClick={() => appendSelection(index)}></PIcon>
                      <PIcon
                        name="icon-minus-circle"
                        size={20}
                        onClick={() => removeSelection(index)}></PIcon>
                    </>
                  )}
                </Flex>
              </Checkbox>
            )
          })}
        </Flex>
      </Checkbox.Group>
    </div>
  )
}

export default MultipleChoice
